<template>
  <view class="page-body">
    <template v-for="(tem, key) in templateData">
      <div  v-if="tem.length" class="page-item" :key="key">
        <div class="title font-w-600 u-font-30">{{ key }}</div>
        <div class="list">
          <div class="col-list flex flex-wrap u-m-t-30">
            <div class="item u-m-b-22" @click="$utils.toUrl('/chart-gpt/chart/chart?value=' + item.question)" v-for="item in tem" :key="item.id">
              <div class="font-w-600 u-line-1 u-m-b-20">{{ item.name }}</div>
              <div class="u-line-2 color-999">
                {{ item.question }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
    
    <FootNav :controlList="tabBarData"></FootNav>

  </view>
</template>
<script>
import tabBarData from '@/chart-gpt/static/js/tabbarJson.js'
import FootNav from "@/components/diyNew/footNav/index"

export default {
  components:{
    FootNav
  },
  data() {
    return {
      tabBarData,
      templateData: {},
      pageData: {
        page: 1,
        limit: 10,
        loadmoreStatus: 'loadmore',
      },
    };
  },
  onLoad() {
    this.loadData();
  },
  onShow() {},
  methods: {
    async loadData(reset, fn) {
      if (reset) {
        let { pageData, templateData } = this.$options.data();
        this.pageData = pageData;
        this.templateData = templateData;
      }
      if (this.pageData.loadmoreStatus == 'nomore') return;
      const res = await this.$allrequest.chart.templateList(this.pageData);
      this.templateData = {
        ...this.templateData,
        ...res.data.list,
      };
      this.pageData.loadmoreStatus = res.data.list < 10 ? 'nomore' : 'loadmore';
      this.pageData.page++;
      fn && fn();
    },
  },
  computed: {},
  watch: {},
  onReachBottom() {
    this.loadData()
  },
  onPullDownRefresh() {},
};
</script>
<style lang="scss" scoped>
.page-body {
  min-height: 100vh;
  padding: 30rpx 24rpx calc(100rpx + env(safe-area-inset-bottom));
  .col-list {
    .item {
      padding: 24rpx;
      width: 340rpx;
      height: 176rpx;
      background: #f8f8f8;
      border-radius: 30rpx;
      &:nth-child(2n) {
        margin-left: 22rpx;
      }
    }
  }
}
</style>
